<!-- subpkg_consult/medicine/timeline/index.vue -->
<script setup>
	import { ref, computed } from 'vue'
	import { logisticsApi } from '@/services/medicine.js'
	const props = defineProps({
		id: String,
	})
	const polyline = ref([])
	const markers = ref([
		// {
		// 	id: 1,
		// 	latitude: 40.060539,
		// 	longitude: 116.343847,
		// 	iconPath: '/static/images/start.png',
		// 	width: 25,
		// 	height: 30,
		// },
		// {
		// 	id: 2,
		// 	latitude: 40.086757,
		// 	longitude: 116.328634,
		// 	iconPath: '/static/images/end.png',
		// 	width: 25,
		// 	height: 30,
		// },
		// {
		// 	id: 3,
		// 	latitude: 40.083465,
		// 	longitude: 116.332938,
		// 	iconPath: '/static/images/car.png',
		// 	width: 50,
		// 	height: 30,
		// },
	])
	const center = ref({})
	// 胶囊距离顶部的距离
	let top = 0

	// #ifdef MP-WEIXIN
	const menuButton = uni.getMenuButtonBoundingClientRect()
	top = menuButton.top - (50 - menuButton.height) / 2 + 'px'
	// #endif

	function onBackClick() {
		uni.navigateBack({ delta: 1 })
	}
	const logisticsInfo = ref({})
	const getLogistics = async () => {
		const { code, data, message } = await logisticsApi(props.id)
		if (code !== 10000) return uni.utils.toast(message)
		logisticsInfo.value = data
		const from = data.logisticsInfo[0]
		const to = data.logisticsInfo[data.logisticsInfo.length - 1]
		markers.value = [
			{
				id: 1,
				latitude: from.latitude,
				longitude: from.longitude,
				iconPath: '/static/images/start.png',
				width: 25,
				height: 30,
			},
			{
				id: 2,
				latitude: to.latitude,
				longitude: to.longitude,
				iconPath: '/static/images/end.png',
				width: 25,
				height: 30,
			},
		]
		uniCloud.callFunction({
			name: 'qq-map',
			data: {
				from: Object.value(from).join(','),
				to: Object.value(to).join(','),
			},
			success: ({ result }) => {
				const coors = result.result.routes[0].polyline
				const points = []
				for (var i = 2; i < coors.length; i++) {
					coors[i] = coors[i - 2] + coors[i] / 1000000
				}
				for (var i = 0; i < coors.length; i += 2) {
					points.push({
						latitude: coors[i],
						longitude: coors[i + 1],
					})
				}
				const current = points[100]
				center.value = current
				markers.value.push({
					id: 3,
					latitude: current.latitude,
					longitude: current.longitude,
					iconPath: '/static/images/car.png',
					width: 50,
					height: 30,
				})
				polyline.value.push({
					points,
					color: '#16c2a3',
					width: 5,
				})
			},
		})
	}
	getLogistics()
</script>

<template>
	<view class="timeline-page">
		<map
			:polyline="polyline"
			:markers="markers"
			:latitude="center.latitude"
			:longitude="center.longitude"
			scale="12"
			class="uni-map"
		/>
		<cover-view :style="{ paddingTop: top }" class="navigator-bar">
			<cover-view @click="onBackClick" class="icon-back">
				<cover-image src="/static/images/icon-back.png" />
			</cover-view>

			<cover-view class="title">{{ logisticsInfo.statusValue }}</cover-view>
		</cover-view>
		<cover-view class="timeline-meta">
			<cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
			<cover-view class="extra">
				预计{{ logisticsInfo.estimatedTime }}送达
				{{ logisticsInfo.name }}
				{{ logisticsInfo.awbNo }}
			</cover-view>
		</cover-view>
		<view class="timeline-detail">
			<view class="title">物流详情</view>
			<view class="timeline">
				<view class="line">
					<view class="badge text">收</view>
					<view class="content">
						收货地址：广东省广州市大华区明离路科技园880号
					</view>
				</view>
				<view v-for="item in logisticsInfo.list" :key="item.id" class="line">
					<view class="badge dot" v-if="item.status <= 3"></view>
					<view class="badge icon" v-if="item.status === 4">
						<uni-icons
							color="#2cb5a5"
							custom-prefix="iconfont"
							type="icon-truck"
						/>
					</view>
					<view class="badge icon" v-if="item.status === 5">
						<uni-icons
							color="#2cb5a5"
							custom-prefix="iconfont"
							type="icon-checked"
						/>
					</view>
					<view class="label">{{ item.statusValue }}</view>
					<view class="content">{{ item.content }}</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
				<!-- <view class="line">
					<view class="badge icon">
						<uni-icons
							color="#2cb5a5"
							custom-prefix="iconfont"
							type="icon-truck"
						/>
					</view>
					<view class="label">派送中</view>
					<view class="content">
						您的订单正在派送中【深圳市】科技园派送员宋平正在为您派件
					</view>
					<view class="time">今天 10：25</view>
				</view>
				<view class="line">
					<view class="badge dot"></view>
					<view class="label">运输中</view>
					<view class="content"> 在广东深圳公司进行发出扫描 </view>
					<view class="time">今天 10：25</view>
				</view>
				<view class="line">
					<view class="badge dot"></view>
					<view class="content"> 在分拨中心广东深圳公司进行卸车扫描 </view>
					<view class="time">今天 10：25</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
